<template>
  <van-row>
    <van-col span="12">{{ userName }}</van-col>
    <van-col span="12" style="text-align: right">
      <van-button type="primary" @click="showExit = true"> 退出 </van-button>
    </van-col>
  </van-row>
  <van-popup
    v-model:show="showExit"
    position="bottom"
    :style="{ height: '50%' }"
  >
    <p v-if="isPlaying">游戏过程中退出要扣分，确定退出?</p>
    <p v-else>确定退出?</p>
    <van-button size="small" text @click="showExit = false">取消</van-button>
    <van-button size="small" type="primary" @click="exit()">确定</van-button>
  </van-popup>
  <van-cell-group>
    <van-cell :value="game.description">
      <template #title>
        <span class="custom-title">游戏说明</span>
        <van-tag type="success">{{ game.gameType }}</van-tag>
        <van-tag type="warning">{{ game.playType }}</van-tag>
      </template>
    </van-cell>
    <van-cell title="游戏条件" :value="game.gameCondition" />
    <van-cell title="状态" :value="game.statusName" />
  </van-cell-group>
  <van-cell title="玩家">
    <template #value>
      <span
        style="margin-right: 15px"
        v-for="p in game.players"
        :key="p.playerId"
        >{{ p.playerName }}
        <van-tag :type="getTagTypeByPlayerStatus(p.playerStatus)">{{
          p.playerStatus
        }}</van-tag></span
      >
    </template>
  </van-cell>

  <van-cell title="游戏记录" />

  <van-row
    v-for="(r, index) in game.records"
    :key="r"
    :class="index % 2 == 0 ? 'on' : 'off'"
  >
    <van-col span="4" style="text-align: center">{{ index + 1 }}</van-col>
    <van-col span="6">{{ r.playerName }}</van-col>
    <van-col span="8">{{ r.answer }}</van-col>
    <van-col span="6">{{ r.isProperAnswer ? "正确" : "错误" }}</van-col>
  </van-row>
  <input v-model="answer" v-if="inturn" />
  <van-button v-show="inturn" type="info" @click="playGame()">回答</van-button>
  <van-button v-show="qiangda" type="info" @click="setPlayer()">
    抢答
  </van-button>
  <van-button v-show="showStart" type="success" @click="start()">
    开始
  </van-button>
  <van-progress v-if="count" :percentage="countprc" :pivot-text="count" />
  <van-notice-bar v-if="result" :scrollable="false" :text="result" />
</template>
<script>
export default {
  emits: ["exit"],
  props: {
    connection: Object,
  },
  created() {},
  data() {
    return {
      userName: "",
      inturn: false,
      game: {
        id: "",
        creator: "",
        currentPlayer: "",
        description: "",
        gameType: "",
        playType: "",
        gameCondition: "",
        records: [],
        players: [],
        activatePlayers: [],
        status: "",
        statusName: "",
      },
      answer: "",
      result: "",
      qiangda: false,
      count: "",
      showStart: false,
      showExit: false,
    };
  },
  computed: {
    countprc() {
      if (this.count) {
        return (this.count * 100) / 60;
      }
      return 0;
    },
    isPlaying() {
      if (this.game) {
        return this.game.status == 1;
      }
      return false;
    },
  },
  methods: {
    init: function (connection) {
      var me = this;
      connection.on("ShowGameResult", function (game, message) {
        me.inturn = game.currentPlayer == me.userName;
        me.game = game;
        me.showStart =
          me.userName == game.creator &&
          game.status == 0 &&
          game.activatePlayers.length > 1;
        if (game.status == 1) {
          if (game.currentPlayer) {
            me.qiangda = false;
            me.result = "轮到" + game.currentPlayer + "回答";
            if (me.userName == game.currentPlayer) {
              connection
                .invoke("SetPlayer", me.userName, me.gameId)
                .catch(function (err) {
                  me.result = err.toString();
                });
            }
          } else {
            me.qiangda = false;
            for (var i = 0; i < game.activatePlayers.length; i++) {
              var p = game.activatePlayers[i];
              if (p == me.userName) me.qiangda = true;
            }
            if (me.qiangda) {
              connection
                .invoke("StartGoToPlayTimer", me.gameId)
                .catch(function (err) {
                  me.result = err.toString();
                });
            }
          }
        } else me.qiangda = false;
        me.answer = "";
        me.count = "";
        if (message) me.result = message;
      });
      connection.on("SetPlayerResult", function (currentuser, result) {
        me.inturn = currentuser == me.userName;
        if (result) me.result = result;
        me.qiangda = false;
        //if (nextuser) me.qiangda = false; else me.qiangda = true
        me.answer = "";
      });
      connection.on("SetCount", function (c) {
        me.count = c;
      });
      connection.on("OnExitGame", function () {
        me.$emit("exit");
      });
      connection.on("ShowMessage", function (message) {
        me.result = message;
      });
    },
    playGame: function () {
      var connection = this.connection;
      this.result = "判断答案是否正确......";
      var me = this;
      connection
        .invoke("PlayGame", this.userName, this.gameId, this.answer)
        .catch(function (err) {
          me.result = err.toString();
        });
    },
    loadGame: function (username, gameid) {
      var me = this;
      me.userName = username;
      me.gameId = gameid;
      me.connection.invoke("EnterGame", username, me.gameId);
    },
    setPlayer: function () {
      var connection = this.connection;
      this.result = "抢答......";
      var me = this;
      connection
        .invoke("SetPlayer", this.userName, this.gameId)
        .catch(function (err) {
          me.result = err.toString();
        });
    },
    exit: function () {
      var me = this;
      this.showExit = false;
      me.connection
        .invoke("LeaveGame", this.userName, this.gameId)
        .catch(function (err) {
          me.result = err.toString();
        });
    },
    start: function () {
      var me = this;
      me.connection
        .invoke("StartGame", this.userName, this.gameId)
        .catch(function (err) {
          me.result = err.toString();
        });
    },
    getTagTypeByPlayerStatus(status) {
      if (status == "出局") return "danger";
      if (status == "等待") return "primary";
      return "success";
    },
  },
};
</script>
<style scoped>
.on {
  background: #eeeeee;
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 3.5mm;
}

.off {
  padding: 4px;
  font-size: 3.5mm;
  padding-top: 15px;
  padding-bottom: 15px;
  border-top: 1px solid #aaaaaa;
}
</style>
